import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import VueRouter from 'vue-router'
// import  home from '../components/home.vue'
// import  about from '../components/about.vue'
// import user from '../components/user.vue'

// 路由懒加载的方式请求组件
const home = ()=>import('../components/home.vue')
const about = ()=>import('../components/about.vue')
const user = ()=>import('../components/user.vue')

// 安装插件 
Vue.use(Router)
const router = new Router({
  // 配置路由和组件之间的关系
  routes: [
    {
      //这里配置一个默认的重定向  localhost:8080就重定向到home
      path: '/',
      redirect:'/home'
    },
    {
      path:'/home',
      component:home,
      // 配置路由嵌套 children是个数组
      children:[
        {
          path:'message',
          component:()=>import('../components/homeChildMessage.vue')
        },
        {
          path:'news',
          component:()=>import('../components/homeChildrenNews.vue')
        },
      ],
      meta:{
        title:'首页',
      }
    },
    {
      path:'/about',
      component:about,
      meta:{
        title:'关于',
      },
      beforeEnter: (to, from, next) => {
        // 路由独享守卫 只对这个路由生效
        console.log('路由独享守卫执行了')
        next()
      }
    },
    {
      // 这里是动态获取数据的写法 :后面的命名没有关系
      path:'/user/:sb',
      component:user,
      meta:{
        title:'用户'
      }
    },
    {
      path:'/usercenter',
      component:()=>import('../components/UserCenter.vue'),
      meta:{
        title:'用户中心',
      }
    }
  ],

  // 把hash模式换成history模式
  mode:'history',

  //  每个被点击的元素 都会动态加上.router-link-active 
  // 所有被点击的htmldom元素，就会带上 active这个类 
  linkActiveClass:'active',

})

 // 用全局守卫 跳转页面前会执行这个守卫函数
 /* 
  to表示跳转后的路由对象
  from表示跳转后的路由对象
  next方法是必须要的 具体可以看官方文档
 */
// 跳转之前执行的守卫guard
router.beforeEach((to, from, next) => {
  // to.matched[0].meta.title拿到上面定义的元数据
  document.title=to.matched[0].meta.title;
  console.log(to)
  // next可以跳转到其他的地址 ，比如判断用户是否登录，没登录的话跳转到登录页面
  next();
})

// 跳转完成之后调用的后置钩子 Hook
router.afterEach((to,from)=>{
  console.log('afterhook 执行了')
})

export default router;